<template>
    <div class="background">
    <el-container class="socialdetail">
        <el-header  class="header">
           {{title}}
            <el-divider></el-divider>
        </el-header>
        <el-main class="main">
            <div class="content">{{photodescribe}}</div>
            摄影<a class="photographer">@{{photographer}}</a><br>
            出境<a class="photographer">@{{modelname}}</a><br>
        </el-main>
        <el-footer class="footer">
            <div class="demo-image__lazy">
                <el-image v-for="url in photos" :key="url" :src="url" lazy></el-image>
            </div>
        </el-footer>
    </el-container>

        <el-container class="comment">
            <el-header class="commentheader">
                <el-form ref="form" :model="form" label-width="20px" >
                    <el-form-item >
                        <el-input type="textarea" v-model="form.desc"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit" style="float: right ">发布评论</el-button>
                    </el-form-item>
                </el-form>
            </el-header>
            <el-main class="commentcontent">
               <p style="font-size:18px;">评论({{socialChat.length}})</p>
                <div class="commentmain">
                    <ul class="info_comm_list">
                        <li v-for="(item,index) in socialChat" :key="item.index">
                            <el-avatar   :src=ServeUrl+item.user.uImgpath style="float: left" :size="50"></el-avatar>
                            <div class="data">
                                <p>
                                    <a class="dataname">{{item.user.uUsername}}</a>
                                </p>
                               <div class="datacontent">
                                  {{item.chat.pContent}}
                               </div>
                            </div>
                        </li>

                    </ul>

                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    import axios from 'axios';
    export default {
        data(){
            return{
                ServeUrl:this.$store.state.beginUrl,
                title:'',
                photodescribe:'',
                photographer:'',
                modelname:'',
                photos:[],
                form: {
                    desc: '',
                },
                socialChat:[]
            }
        },
        methods:{
            onSubmit(){
                let pid=JSON.parse(window.sessionStorage.getItem("publishid"));
                let uid=JSON.parse(window.sessionStorage.getItem("user")).uUserid;
                let formdata = new FormData();
                formdata.append("publishid",pid);
                formdata.append("userid",uid);
                formdata.append("Content",this.form.desc);
                axios({
                    url:'/social/addContent',
                    method:"post",
                    data:formdata,
                    headers: {
                        "Content-Type": "multipart/form-data"
                    }
                }).then(ret=>{
                   if(ret.data=="addchatsucess"){
                       this.$message.success('留言成功');
                       location.reload();
                   }
                })
            }
        },
        created(){
            let pid=JSON.parse(window.sessionStorage.getItem("publishid"))
            this.$axios.get("/social/queryDetailbypid?pid="+pid).then(ret=>{
                this.title=ret.data.socialPublish.pWorktitle;
                this.photodescribe=ret.data.socialPublish.pPhotodescribe;
                this.photographer=ret.data.socialPublish.pPhotographer;
                this.modelname=ret.data.socialPublish.pModelname;
                ret.data.sociapPicturePath.forEach(path=>{
                    this.photos.push(this.ServeUrl+path)
                });
                ret.data.socialChats.forEach(chat=>{
                    this.socialChat.push(chat)
                })
                }
            )
        },
    }
</script>

<style scoped>
    .background{
    background: #EDEDEF;
        width: 100%;
        margin: 0 auto;
        overflow: auto;
    }
    .socialdetail{
        background: white;
        width: 800px;
        margin:0 auto 0 auto;
        display: block;
        overflow: hidden;
    }
    .header{
        font-size:24px;
        margin-bottom:20px;
        margin-top: 40px;
    }
    .main{
        line-height: 18px;
        font-size:20px;
        line-height: 28px;
    }
    .content{
        line-height: 28px;
        margin-bottom: 30px;
    }
    .photographer{
        color:blue;
        cursor: pointer;
    }
    .photographer:hover{
        color: #FF6699;
    }
    .el-image{
        float: left;
        margin-top: 35px;
        margin-bottom: 5px;
    }
   .comment{
       background: white;
       width: 800px;
       margin:20px auto 0 auto;
       overflow: hidden;
   }
    .commentheader{
        margin-top: 30px;
    }
    .commentcontent{
        margin-top: 30px;
    }

    .info_comm_list{
        list-style: none;
        margin: 0px;
        padding: 0px;
    }
    .info_comm_list li {
        display: inline-block;
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px #eee solid;
        width: 100%;
        overflow: hidden;
    }
    .info_comm_list li .data {
        margin-left: 60px;
    }
    .dataname{
        font-weight: bold;
        color: #555555;
        float: left;
    }
    .datacontent{
        margin-top: 35px;
        width: 100%;
        float: left;
        padding: 0px;
    }
</style>